<template>
  <view class="container">
    <!-- 认证信息区域 -->
    <view class="auth-info-container">
      <!-- 头像和已认证标识 -->
      <view class="avatar-section">
        <view class="avatar-wrapper">
          <image style="width: 60rpx;height: 60rpx;" src="../../static/8.png"></image>
        </view>
        <view class="verified-badge">
          <uni-icons type="checkmarkempty" size="8" color="#f97316" />
        </view>
      </view>

      <!-- 身份证图标 -->
      <view class="id-card-icon">
        <uni-icons type="creditcard" size="50" color="#FFFFFF" />
      </view>

      <!-- 用户信息 -->
      <view class="user-info">
        <text class="user-name">{{ maskedName }}</text>
        <text class="verified-text">已认证</text>
      </view>

      <!-- 身份证号 -->
      <text class="id-card-number">{{ maskedIdCard }}</text>

      <!-- 手机号 -->
      <view class="phone-container">
        <text class="phone-number">{{ maskedPhone }}</text>
        <text style='color: #f97316;' class="current-account">当前账号</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        name: '',
        idCard: '',
        phone: ''
      }
    }
  },
  computed: {
    // 脱敏处理后的姓名
    maskedName() {
      if (!this.userInfo.name) {
        // 如果本地缓存没有数据，使用默认示例数据
        return '*明扬';
      }
      // 只将第一个字符转为星号，保留后面的字符
      return '*' + this.userInfo.name.substring(1);
    },

    // 脱敏处理后的身份证号
    maskedIdCard() {
      if (!this.userInfo.idCard) {
        // 如果本地缓存没有数据，使用默认示例数据
        return '342 **** **** **** **32';
      }
      // 保留前3位和后4位，中间用星号代替
      const firstPart = this.userInfo.idCard.substring(0, 3);
      const lastPart = this.userInfo.idCard.substring(this.userInfo.idCard.length - 4);
      return `${firstPart} **** **** **** **${lastPart}`;
    },

    // 脱敏处理后的手机号
    maskedPhone() {
      if (!this.userInfo.phone) {
        // 如果本地缓存没有数据，使用默认示例数据
        return '180****0451';
      }
      // 保留前3位和后4位，中间用星号代替
      const firstPart = this.userInfo.phone.substring(0, 3);
      const lastPart = this.userInfo.phone.substring(this.userInfo.phone.length - 4);
      return `${firstPart}****${lastPart}`;
    }
  },
  onLoad() {
    this.loadUserData();
  },
  methods: {
    // 从本地缓存加载用户数据
    loadUserData() {
      try {
        const userData = uni.getStorageSync('userInfo');
        if (userData) {
          const parsedData = JSON.parse(userData);
          // 更新用户信息
          this.userInfo.name = parsedData.name || '';
          this.userInfo.idCard = parsedData.idCard || '';
          this.userInfo.phone = parsedData.phone || '';
          console.log('成功加载本地存储的用户数据:', parsedData);
        } else {
          console.log('本地存储中未找到用户数据，使用默认示例数据');
        }
      } catch (error) {
        console.error('加载本地存储数据失败:', error);
      }
    }
  }
}
</script>

<style>
.container {
  width: 100%;
  min-height: 100vh;
  background-color: #f2f2f4;
}

.auth-info-container {
  padding: 80rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #6b7280;
}

.avatar-section {
  position: relative;
  margin-bottom: 40rpx;
}

.avatar-wrapper {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  background-color: #f97316;
  display: flex;
  align-items: center;
  justify-content: center;
}

.verified-badge {
  position: absolute;
  bottom: 20rpx;
  right: 15rpx;
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  background-color: #ffffff;
  border: 4rpx solid #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.id-card-icon {
  margin-bottom: 20rpx;
}

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 0rpx;
}

.user-name {
  font-size: 40rpx;
  font-weight: 500;
  color: #ffffff;
  margin-right: 16rpx;
}

.verified-text {
  font-size: 8rpx;
  color: #ffffff;
  /* background-color: #f97316; */
  border: 1px solid #fff;
  padding: 3rpx;
  border-radius: 5rpx;
}

.id-card-number {
  font-size: 32rpx;
  color: #ffffff;
  margin-bottom: 50rpx;
  letter-spacing: 8rpx;
}

.phone-container {
  width: 95%;
  display: flex;
  align-items: center;
  background-color: #ffffff;
  padding: 25rpx 30rpx;
  border-radius: 10rpx;
  display: flex;
  justify-content: space-between;
  margin-bottom: -120rpx;

}

.phone-number {
  font-size: 32rpx;
  color: #f97316;
  margin-right: 20rpx;
}

.current-account {
  font-size: 24rpx;
  color: #999999;
}
</style>
